window.addEventListener("load", function () {
    //模拟服务器上的传递过来的数据  本地存储JSON格式
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]



    // 功能一
    // 1-1遍历数组
    // 1-2采用字符拼接
    let html = "";
    apiTypeData.forEach(function (v, i) {
        if (i === 0) {
            html += `<li title="${v.keyword}" class="active">${v.name}</li>`
        } else if (v.isnew) {// 文字加粗
            html += `<li title=${v.keyword} style="font-weight: bold;">${v.name}</li>`
        } else {
            html += `<li title="${v.keyword}">${v.name}</li>`
        }
    })
    //1-3 渲染进页面
    $(".APICatch ul").innerHTML = html;

    // 功能二
    // 2.为li添加点击事件
    $(".APICatch ul li").forEach(function (v) {
        v.addEventListener("click", function () {
            // 2.1 排他思想--并添加激活样式
            $(".APICatch ul li").forEach(function (v) {
                v.className = "";
            })
            this.className = "active";
            // 2.2表单域内容和标题跟着变
            $(".APICatch > div input").value = `${this.title}`;
            $(".APICatch > div strong").textContent = `${this.textContent}`

        })
    })

    //API列表区域 模拟服务器返回的数据
    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南2", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证2", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报2", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验2", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务2", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南3", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证3", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验3", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务3", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南4", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证4", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验4", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务4", price: "￥0.0400/次", isSpecial: true },

    ]
    /*    //卡片功能
       let html2 = "";
       listDataArr.forEach(function (v) {
           // 1.更换图片
           // 2.更换文字
           console.log(v.price == "免费");
   
           html2 += `  <li>
                           <img src="../imgs/${v.img}" alt="">
                           <p>${v.name}</p>
                           <p class=${v.price == "免费" ? "" : "red"}>${v.price}</p>
                           <!-- 企业专用 -->
                           ${v.isSpecial ? "<span>企业专用</span>" : ""}
                           <!-- 申请数据 -->
                           <a href="#">申请数据</a>
                       </li>`
       })
       $(".APICards ul").innerHTML = html2; */

    // 功能五：点击分页器的页码时，增加激活样式
    // 1.获取相关节点                          
    // 2.给页码绑定点击事件
    $("#pagination ul li").forEach(function (v) {
        v.addEventListener("click", function () {
            // 3.点击后先移除全部按钮的激活样式（排他思想）
            $("#pagination ul li").forEach(function (item) {
                item.classList.remove("active");
                // console.log(this); // 注意！forEach中this指向的是window
            });
            // 4.再给自己增加激活样式
            this.classList.add("active");
            // 功能6：点击分页器实现卡片区的分页
            // console.log(Number(v.textContent)); // 当前点击的页面，拿到的是字符串所以要转换为数字，例：'2' => 2
            render(Number(v.textContent), 5, listDataArr);
        });
    });

    // 功能六：点击分页器实现卡片区的分页，封装一个渲染函数
    // 确定函数参数--当前页码pagination，每页条数pageSize，arr
    // 当前页码，每页条数，原数据
    // 公式：(当前页码 - 1) * 每页条数！！！
    function render(pagination, pageSize, arr) {
        // 思路：先对数据进行处理然后执行渲染
        // 技巧：数据处理和渲染要分开考虑！！！
        // 对数组进行处理
        // 求开始索引 (当前页码 - 1) * 每页条数
        let startIndex = (pagination - 1) * pageSize;//卡片的开始索引
        const result = arr.slice(startIndex, startIndex + pageSize);
        // 1.获取后台数据，进行遍历
        let cardsHtml = "";
        result.forEach(function (v) {
            // 2.遍历时拼接为HTML结构
            cardsHtml += ` <li>
                        <img src="../imgs/${v.img}" alt="">
                        <p>${v.name}</p>
                        <p class=${v.price == "免费" ? "" : "red"}>${v.price}</p>
                        <!-- 企业专用 -->
                        ${v.isSpecial ? "<span>企业专用</span>" : ""}
                        <!-- 申请数据 -->
                        <a href="#">申请数据</a>
                    </li>`;
        });
        // 3.将HTML结构放入指定位置
        $(".APICards ul").innerHTML = cardsHtml;
    }
    // 页面加载时初步渲染页面
    render(1, 5, listDataArr);


    // 功能7：点击申请数据按钮弹出蒙层
    // a获取相关节点
    // b给公共的祖先节点（卡片--ul）绑定点击事件---事件委派
    // c根据localName属性进行区分

    // d弹出蒙层方式一:开启蒙层后如何禁止滚动条--滚动条是body或根元素的一部分（采用overflow:"hidden"）

    $(".APICards ul li a").forEach(function (v) {
        v.addEventListener("click", function (e) {
            $("#mask").style.display = "block";
            document.body.style.overflow = "hidden"
            e.preventDefault();
        });

    })

    /* d弹出蒙层方式二
     $(".APICards ul").addEventListener("click", function (e) {
         if (e.target.localName === "a") {
             $("#mask").style.display = "block";
         }
     }); */
    //e点击蒙层关闭
    $("#mask").addEventListener("click", function (e) {
        $("#mask").style.display = "none";
        document.body.style.overflow = "auto"
    });
    // 阻止事件冒泡
    $("#loginModal").addEventListener("click", function (e) {
        e.stopPropagation();
    })
    // 功能:选项卡---点击切换选项卡

    $(".loginVision form")[0].classList.add("block-none");
    tab(".loginModalTab a", "active", ".loginVision form", "block-none");












});

